.page-mj {
  // background-color: #282c34;
  height 100%

  .inner {
    display: flex;
    // height: 100%

    .mj-box {
      margin 10px
      // background-color #262626
      // border 1px solid #454545
      // height: calc(100vh - 50px)
      // overflow: scroll
      min-width 300px
      max-width 300px
      padding 10px
      border-radius 10px
      color var(--text-theme-color);
      font-size 14px
      overflow auto

      h2 {
        font-weight: bold;
        font-size 20px
        text-align center
        color var( --theme-textcolor-normal)
      }

      // 隐藏滚动条

      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }

      .mj-params {
        margin-top 10px
        overflow auto


        .param-line {
          padding 0 10px

          .el-icon {
            position relative
          }

          .grid-content {
            // background-color #383838
            background: var(--card-bg);
            border-radius: 8px;
            padding 8px 14px
            display flex
            cursor pointer
            margin-bottom: 10px;
            // border 1px solid #383838
            border 1px solid var(--chat-bg)


            &:hover {
              border 1px solid var(--theme-border-hover)

            }

            .icon {
              width 20px
              height 20px
              margin-bottom 5px
            }

            .text {
              margin-left 5px
              margin-top 2px
            }
          }


          .grid-content.active {
            // color #47fff1
            // background-color #585858
            border 1px solid var(--theme-border-hover)
          }

          .model {
            background: var(--card-bg);
            // border 1px solid #454545
            border-radius 8px
            padding 5px
            margin-bottom 10px
            display flex
            flex-flow column
            align-items center
            cursor pointer
            border 1px solid var(--chat-bg)

            &:hover {
              border 1px solid var(--theme-border-hover)

            }

            .el-image {
              height 40px
              width 100%
            }

            .text {
              margin-top 4px
              font-size 12px
            }

          }

          .model.active {
            // color #47fff1
            // background-color #585858
            border 1px solid var(--theme-border-hover)

          }

          .form-item-inner {
            display flex
            align-items: center

            .el-select {
              --el-select-input-focus-border-color: var(--el-color-primary)
              --el-input-focus-border-color: var(--el-color-primary)
            }

            .el-input__wrapper {
              background: var(--chat-bg)
            }

            .el-input__inner {
              color: var(--text-theme-color)
            }

            .el-icon {
              margin-left 10px
            }
          }

          .img-uploader {
            .el-upload {
              border: 1px dashed var(--el-border-color);
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              width 100%
              transition: var(--el-transition-duration-fast);

              &:hover {
                border-color: var(--el-color-primary);
              }

              .el-icon.uploader-icon {
                font-size: 28px
                color: #8c939d
                width 100%
                height: 120px
                text-align: center
              }
            }
          }

        }

        .param-line.pt {
          display: flex
          align-items: center
          padding-top 5px
          padding-bottom 5px
        }
      }
    }

    .el-form {
      .el-form-item__label {
        color var(--text-theme-color)
      }

      .el-input, .el-slider {
        width 180px
      }

      .uploader-icon {
        font-size 24px
        position relative
        top 3px
      }
    }

    .task-list-box {
      background: var(--chat-bg);
      width 100%
      //padding 0 10px 10px 10px
      color var(--text-theme-color)
      overflow-x hidden

      .task-list-inner {
        .el-tabs {
          --el-tabs-header-height: 55px;
        }

        .el-tabs__item {
          color: var(--text-theme-color);
          font-size: 18px;
        }

        .title-tabs .el-tabs__item.is-active {
          color: var( --theme-textcolor-normal);
          font-size: 18px;
        }

        .title-tabs .el-tabs__active-bar {
          background-color: var( --theme-textcolor-normal);
        }

        .el-textarea {
          --el-input-focus-border-color: var(--el-color-primary)
        }

        .el-textarea__inner {
          background: transparent;
          color: var(--text-theme-color);
        }

        .el-input__wrapper {
          background: transparent;
          padding 5px
        }

        .text {
          margin-bottom: 10px;
          color: #6b778c;
          font-size: 15px
        }

        .param-line.pt {
          padding-top 5px
          padding-bottom 5px
        }

        .form-item-inner {
          display flex
          align-items: center

          .el-icon {
            margin-left 10px
          }
        }

        .el-form-item__label {
          color var(--text-theme-color)
        }

        // 图片上传样式

        .img-inline {
          display flex

          .img-uploader {
            .el-upload {
              border: 1px dashed var(--el-border-color);
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              width 120px;
              transition: var(--el-transition-duration-fast);
              margin-bottom: 20px;

              &:hover {
                border-color: var(--el-color-primary);
              }

              .el-icon.uploader-icon {
                font-size: 28px
                color: #8c939d
                width 100%
                height: 120px
                text-align: center
              }
            }
          }

          .img-list-box {
            display flex

            .img-item {
              width 120px
              position relative
              margin-right 10px

              .el-image {
                width 120px
                height 120px
                border-radius 5px
              }

              .el-button {
                position absolute
                right 5px
                top 5px
                width 20px
                height 20px
              }
            }
          }
        }

        .el-row.text-info {
          width 100%
          padding 10px 0

          .el-tag {
            margin-right 10px
          }
        }

        // 提交按钮

        .submit-btn {
          display flex
          margin: 20px 0

          .el-button {
            width 200px
          }
        }


        .job-list-box {
          // 任务列表
          @import "running-job-list.styl"

          .finish-job-list {
            #waterfall {
              display flex
              justify-content center
              padding-top 20px
              flex-flow column

              .waterfall-item {
                overflow visible

                .job-item {
                  width 100%
                  height 100%
                  border 1px solid #666666
                  padding 6px
                  border-radius 6px
                  //position relative

                  .el-image {
                    overflow auto
                  }

                  .opt {
                    padding-top 5px

                    .opt-line {
                      margin 6px 0

                      ul {
                        display flex
                        flex-flow row

                        li {
                          margin-right 6px

                          a {
                            padding 3px 0
                            width 40px
                            text-align center
                            border-radius 5px
                            display block
                            cursor pointer
                            background-color #4E5058
                            color #fff

                            &:hover {
                              background-color #6D6F78
                            }
                          }
                        }

                        .show-prompt {
                          font-size 20px
                          cursor pointer
                        }
                      }
                    }
                  }


                  .remove {
                    display none
                    position absolute
                    right 10px
                    top 10px
                  }

                  &:hover {
                    .remove {
                      display block
                    }
                  }
                }

              }

            }
          }


          .el-image {
            width 100%
            height 100%
            overflow visible

            .el-image-viewer__wrapper {
              img {
                width auto
                height auto
              }
            }

            .image-slot {
              display flex
              flex-flow column
              justify-content center
              align-items center
              min-height 220px
              color var(--text-theme-color)
              overflow hidden

              .err-msg-container {
                overflow hidden
                word-break break-all
                padding 15px
                .title {
                  font-size 20px
                  text-align center
                  font-weight bold
                  color #f56c6c
                  margin-bottom 30px
                }

                .opt {
                  display flex
                  justify-content center
                }
              }
              .iconfont {
                font-size 50px
                margin-bottom 10px
              }
            }
          }

          .el-image.upscale {
            img {
              //height 310px
            }

            .image-slot {
              min-height 310px
            }

            .el-image-viewer__wrapper {
              img {
                width auto
                height auto
              }
            }
          }
        }
      }

      .no-more-data {
        text-align center
        padding 30px
      }
    }

    .generate-btn {
      .iconfont {
        margin-right 5px
      }
    }
  }
}

.mj-list-item-prompt {
  .el-icon {
    margin-left 10px
    cursor pointer
    position relative
  }
}